<template>
  <div class="doctorbox">
    <div v-if="!pushStatus">
      <el-row style="margin-bottom:10px">
        <el-col :span="8" >
          <h4 style="margin:0">
            <span>商品管理</span>
            <el-button class="addBtn" type="primary" @click="pushStatus = true">添加商品</el-button>
          </h4>
        
        </el-col>
        <el-col :span="16" style="text-align:right">
          
        </el-col>
      </el-row>
    
      <el-table :data="tableData" border style="width: 100%" @selection-change="handleSelectionChange">
        <!--<el-table-column type="selection" width="55"></el-table-column>-->
        <el-table-column prop="ID" label="序号" width="60">
          <template slot-scope="scope">{{scope.$index+1}}</template>
        </el-table-column>
        <el-table-column prop="id" label="id"> </el-table-column>      
        <el-table-column prop="type" label="类别"></el-table-column>      
        <el-table-column prop="title" label="标题"></el-table-column>
        <el-table-column prop="price" label="价格"></el-table-column>
        <el-table-column prop="payCount" label="购买人数"></el-table-column>
        <el-table-column prop="pageView" label="浏览人数"></el-table-column>
        <el-table-column prop="status" label="状态"> 
          <template slot-scope="scope">
            <div class="red" v-if="scope.row.status==0">下线</div>
            <div v-else-if="scope.row.status==1">上线</div>
            <div v-else>删除</div>
          </template>
        </el-table-column>
        <el-table-column prop="audit_status" label="审核状态">
          <template slot-scope="scope">
            <div v-if="scope.row.auditStatus==1" style="color:#8bc34a">通过</div>
            <div v-else-if="scope.row.auditStatus==2" style="color:red">失败</div>
            <div v-else>待审核</div>
          </template>
        </el-table-column>
        
        <el-table-column width="180" label="操作">
          <template slot-scope="scope">
            <div>
              <el-button class="addBtn" type="primary" @click="edithFun(scope.row)">编辑</el-button>
              <el-button class="addBtn" v-show="scope.row.status==1 && scope.row.auditStatus == 1" type="warning" @click="Remarks(0,scope.row.productId)">下线</el-button>
              <el-button class="addBtn" v-show="scope.row.status==0 && scope.row.auditStatus ==1" type="primary" @click="Remarks(1,scope.row.productId)">上线</el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>

      <el-dialog title="备注" :visible.sync="dialogVisible" center width="40%" :before-close="handleClose">
        <div class="" style="text-align:center">
          <div><el-input v-model.number="input" placeholder="请输入金额"></el-input></div>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="handleClose">取 消</el-button>
          <el-button type="primary" @click="submitFun('ruleForm2')">确 定</el-button>
        </span>
      </el-dialog>
      <div class="block">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage4"
          :page-sizes="[10, 20, 30, 50]"
          :page-size="10"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
        </el-pagination>
      </div>
    </div>
    <div v-else>
      <Add-Commotwo :editData="editData" @getlist="getlist"></Add-Commotwo>
    </div>
  </div>
</template>

<script>
  import Http from '@/Http/Http'
  import getTime from '@/Http/getTime'
  import AddCommotwo from './Hositem/AddCommotwo'
  export default {
    components:{
      AddCommotwo
    },
    data() {
      return {
        postData:{
          token:'',
        },
        details:'',
        pushStatus:false,
        dialogVisible:false,
        editData:'',
        total:0,
        currentPage4: 1,//分野  
        page:1,
        input:'',
        pageSize:10,
        tableData: [{name:'dsa'}],
        otypes:[],
      }
    },
    created(){
      this.getlist();
      Http.getCommoTypes()
      .then( res => {
        this.otypes = res.data.data;
        
      })
    },
    methods: {
      getlist(){
        
        Http.getCommoLIst({
          "pageIndex":this.page,
          "pageSize":this.pageSize
        })
        .then( res => {
          this.tableData = res.data.data.rows
          console.log(res.data.data)
        })
        
        this.pushStatus = false;
        this.editData = '';
      },
      getdata (evt) {
        console.log(evt.draggedContext.element.text)
      },
    
      edithFun(row){
        Http.getCommoInfo(row.productId)
        .then(res =>{
          console.log(res)
          if(res.data.code == 200){
            this.pushStatus = true;
            this.editData = res.data.data;
          } else if(res.data.code == 404) {
            this.$message.error(res.data.message)
          }
        })
        .catch( err => {
          console.log(err)
        })
      },

      Remarks(val,id){
        let txt;
        val ? txt='上线' : txt = '下线';
        this.$confirm(`是否确定 ${txt} 商品?`)
        .then(_ => {
          Http.checkUpStatu({id:id,status:val})
          .then(res =>{
            if(res.data.code == 200){
              this.$message.success(`${txt} 成功`);
              this.getlist()
            } else {
              this.$message.error(`${txt} 失败，原因：${res.data.message}`);
            }
          })
        })
        .catch(_ => {
          //取消部分
          console.log('bb')
        });
      },
      handleClose() {
        this.dialogVisible = false;
      },

      //选择 推荐
      handleSelectionChange() {
        
      },
      //分页
      handleSizeChange(val) {
        this.pageSize = val;
        this.getlist()
        console.log(`每页 ${val} 条`);
      },
      handleCurrentChange(val) {
        this.page = val;
        this.getlist()
        console.log(`当前页: ${val}`);
      },
    }
  }
</script>
<style  scoped>
.doctorbox{
  background: #fff;
  padding:10px;
  min-height: 500px
}
</style>
